<!-- 发布作品页面 -->
<template>
	<view>
		<!-- 状态栏+导航栏 -->
		<statusBar :height="'80rpx'">
			<view class="flex align-center px-4" style="height: 80rpx;">
				<view @tap="backToPrePage" class="iconfont icon-fanhui flex align-center text-white" style="width: 40rpx;height: 40rpx;"></view>
				<!-- ml-auto可使元素靠近右侧 -->
				<view 
				 @tap="submit"
				 class="ml-auto rounded border border-white text-white flex align-center justify-center"
				 style="width: 117rpx;height: 50rpx;">发布</view>
			</view>
		</statusBar>
		
		<!-- 封面区域 -->
		<view :src="cutImgPath" class="w-100 position-relative" style="height: 470rpx;background-color: #F4F5F6;">
			<image :src="cutImgPath" mode="widthFix" class="w-100 h-100"></image>
			<!-- 修改封面按钮 -->
			<view @tap="choseImage"
				  class="position-absolute rounded-m flex align-center justify-center text-white"
				  style="width: 138rpx;height: 52rpx;bottom: 20rpx;right: 20rpx;background-color: rgba(0,0,0,0.6);">
				  {{cutImgPath == '' ? '添加' : '修改'}}封面
			</view>
		</view>
		
		<!-- 表单区域 -->
		<!-- error-type 用于设置提示类型，数组形式，多个提示类型可以共存 -->
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<!-- :required="true"可显示红色星号* -->
			<u-form-item label="分区" prop="fenqu" :required="true" @click="showFenqu">
				<!-- placeholder-style="color: #c0c4cc;" style="font-size: 28rpx;" 这句是为了解决安卓端的提示文字不能垂直居中的问题 -->
				<view  class="w-100 flex align-center">
					<!-- 选中的分区名称 -->
					<view :style="form.fenqu=='' ? 'color: #c0c4cc;' : '' ">
						{{form.fenqu == '' ? '请选择分区' : form.fenqu}}
					</view>
					<!-- '更多'图标 -->
					<view class="iconfont icon-gengduo ml-auto" style="color: #c0c4cc;"></view>
				</view>
			</u-form-item>
			
			<u-form-item label="标题" prop="title" :required="true">
				<view class="w-100">
					<!-- 标题内容 -->
					<!-- 加入 disable-default-padding 是为了去掉iOS下的默认内边距 -->
					<textarea placeholder="请填写标题" placeholder-style="color: #c0c4cc;" disable-default-padding
					 class="w-100" style="height: 88rpx;line-height: 1.3;font-size: 28rpx;margin-top: 4rpx;"
					 v-model="form.title" :maxlength="-1"/>
					
					<view class="flex" style="color: #c0c4cc;margin-top: 15rpx;">
						<view class="ml-auto bg-white flex-row-reverse font-small" style="display: inline;">
							<text :class="form.title.length > 80 ? 'text-main' : ''">
								{{form.title.length}}
							</text>
							/80
						</view>
					</view>
				</view>
			</u-form-item>
			
			<u-form-item label="类型" prop="type" :required="true">
				<!-- 位置随意 -->
				<u-toast ref="uToast" />
				<radio-group @change="radioChange">
					<label v-for="(item,index) in typeData" :key="index"
					class="radio position-relative" :style="index===0 ? '' : 'margin-left: 48rpx;'">
						<!-- 设置透明遮罩来达到“单选框不可点击”的目的 -->
						<!-- 层级设置为1800的原因是要将其置于“选择分区”的弹框（层级2000）之下 -->
						<view v-if="form.fenqu===''" @click.stop @click="pre"
						 class="position-absolute top-0 right-0 bottom-0 left-0"
						 style="z-index: 1800;background-color: rgba(0,0,0,0);">
						</view>
						
						<!-- 外层加入view标签是为了引入hover-class，radio标签引入hover-class没有效果，点击text部分时 没有hover效果 -->
						<view class="d-inline-block" :hover-class="item.value === form.type ? '' : 'hoverBorder'" hover-start-time="0" hover-stay-time="0">
							<radio :value="item.value" :checked="item.value === form.type"/>
							<text style="color: #868686;">{{item.name}}</text>
						</view>
					</label>
				</radio-group>
			</u-form-item>
			
			<u-form-item label="简介" prop="jianjie">
				<view class="w-100">
					<!-- 标题内容 -->
					<textarea placeholder="可填写简介" placeholder-style="color: #c0c4cc;" disable-default-padding
					 class="w-100" style="height: 174rpx;line-height: 1.3;font-size: 28rpx;margin-top: 4rpx;"
					 v-model="form.jianjie" :maxlength="-1"/>
					
					<view class="flex" style="color: #c0c4cc;margin-top: 15rpx;">
						<view class="ml-auto bg-white flex-row-reverse font-small" style="display: inline;">
							<text :class="form.jianjie.length > 250 ? 'text-main' : ''">
								{{form.jianjie.length}}
							</text>
							/250
						</view>
					</view>
				</view>
			</u-form-item>

		</u-form>
				
		<!-- 点击“分区”表单项展示的遮罩层 -->
		<!-- z-index设置为1999是因为顶部状态栏的z-index是2000 -->
		<u-mask :show="show" @click="hide" :zoom="false" :z-index="1998" ></u-mask>
		
		<view
		 @touchmove.prevent v-if="show"
		 class="w-100 bg-white position-absolute bottom-0"
		 :class="getSystemInfo() ? 'animate-init animate__animated animate__fadeInUp animate__faster' : ''"
		 style="z-index: 2000;">
			<view class="flex" style="height: 650rpx;">
				<!-- 一级分类的竖向滚动区域 -->
				<scroll-view :scroll-y="true" :scroll-top="scrollTop" style="width: 110rpx;height: 100%;">
					<view 
					class="scroll-view-item flex align-center justify-center"
					:class="(index === activeParentIndex ? 'border-top border-bottom' : 'border-right')"
					v-for="(item,index) in fenquData" :key=index
					@tap="activeParentIndex=index"
					style="height: 110rpx;line-height: 1;font-size: 26rpx;"
				    :style="'background-color:' + (index === activeParentIndex ? '#FFFFFF;' : '#F4F4F4;')">
						  {{item.name}}
				    </view>
				</scroll-view>

				<!-- 二级分类的竖向滚动区域 -->
				<scroll-view class="h-100 ml-2 w-100" :scroll-y="true" :scroll-top="topParent">
					<view v-for="(item,index) in fenquData[activeParentIndex].children" :key=index :class="'chose'+index" class="flex scroll-view-item border-bottom" >
						<!-- style="width: 564rpx;" -->
						<view style="flex: 584;">
							<!-- 二级分类标题 -->
							<view class="flex align-center"  style="height: 70rpx;line-height: 1;font-size: 28rpx;">
								{{item.name}}
							</view>
							
							<!-- 二级分类描述 -->
							<view @tap="choseFenqu(index)" style="line-height: 1.4;font-size: 26rpx;color: #AAAAAA;">
								{{item.desc}}
							</view>
						</view>
						
						<view style="flex: 58;" class="flex align-center justify-center">
							<!-- 对勾图标 -->
							<view v-if="activeParentIndex===chosedIndex[0] && index===chosedIndex[1]" class="iconfont icon-htmal5icon22 text-main font-weight-bold"></view>
						</view>
				    </view>
				</scroll-view>
			</view>
			<!-- 分割线 -->
			<view class="divid-line-1"></view>
			<!-- 取消栏 -->
			<text class="safe flex align-center justify-center" @click="hide">取消</text>
		</view>
	</view>
</template>

<script>
	import statusBar from '@/components/common/statusBar.vue'
	// 以下两句用于获取屏幕宽度，进而可将rpx单位转换为px单位
	let sysInfo = uni.getSystemInfoSync()
	let SCREEN_WIDTH = sysInfo.screenWidth
	export default {
		components:{
			statusBar
		},
		data() {
			return {
				// 裁剪后的图片的临时路径
				cutImgPath:'',
				// 控制遮罩层的显示与否
				show: false,
				// 表单项数据
				form: {
					// 被选择的分区名称
					fenqu: '',
					// 作品标题
					title: '',
					// 作品类型
					type: '',
					// 作品简介
					jianjie: ''
				},
				rules: {
					// uview的表单校验规则是根据页面上的表单顺序从上至下来校验的
					// 可以通过灵活使用自定义校验规则来调整校验顺序
					
					// 表单中分区的验证规则
					fenqu: [
						{
							validator: () => {
								return this.form.title.length >0
							}, 
							message: '请填写标题'
						},
						{ 
							// 由于表单中没有使用u-input标签，所以这里只好使用自定义校验规则
							// validator函数返回true则验证通过，返回false则验证失败，触发message
							validator: () => {
								return this.form.fenqu !== ''
							}, 
							message: '请选择分区',
							// 可以单个或者同时写两个触发验证方式 
							// trigger: ['change','blur'],
						},
					],
					// 表单中作品类型的验证规则
					type: [
						{
							validator: () => {
								return this.form.type !== ''
							}, 
							message: '请填写稿件类型'
						}
					],
					// 表单中简介的验证规则
					jianjie: [
						{
							validator: () => {
								return this.form.title.length <= 80
							}, 
							message: '标题超出字数限制，请修改'
						},
						{
							validator: () => {
								return this.form.title.length <= 250
							}, 
							message: '简介超出字数限制，请修改'
						}
					],
				},
				// 选择分区时，被选中的一级分类在其数组中的索引值
				activeParentIndex:0,
				// 被选择的分类的索引，第一项是被选择的一级分类，第二项是被选择的二级分类
				chosedIndex:[0,0],
				// 被选中的分类项距离其父元素顶部的高度（用于选中后再次选择分区时，滚动条自动到达上次选择的位置）
				topParent:0,
				// 一级分类激活标签距离顶部的高度
				scrollTop:0,
				// 当前被选中的单选框的索引
				current:-1,
				// 单选框所有选项的数据
				typeData:[
					{
						name:'自制',
						value:'zizhi'
					},
					{
						name:'转载',
						value:'zhuanzai'
					}
				],
				// 分区数据
				fenquData:[
					{
						// 一级分类名称
						name:'生活',
						children:[
							{
								// 二级分类名称
								name:'日常',
								// 二级分类描述
								desc:'一般日常向的生活类视频'
							},
							{
								name:'动物圈',
								desc:'可爱的、萌萌哒的宠物相关视频'
							},
							{
								name:'搞笑',
								desc:'搞笑挑战、剪辑、表演、配音以及各类日常沙雕视频'
							},
							{
								name:'手工',
								desc:'简易手工艺品的diy制作视频，例如：折纸、手账、橡皮章等'
							},
							{
								name:'绘画',
								desc:'绘画爱好者们关于绘画技巧、绘图过程的分享交流场所'
							},
							{
								name:'运动',
								desc:'一般向运动项目以及惊险刺激的户外极限运动'
							},
							{
								name:'汽车',
								desc:'汽车、摩托车、公交车以及竞赛用车等轮式交通工具相关'
							},
							{
								name:'其他',
								desc:'无法判断分区归属的视频'
							}
						],
						
					},
					{
						name:'美食',
						children:[
							{
								name:'美食制作',
								desc:'包括但不限于料理制作教程，各种菜系、甜点、速食、饮料、小吃制作等'
							},
							{
								name:'美食侦探',
								desc:'包括但不限于探店、街边美食、饮食文化，发现特色地域美食、路边摊与热门网红食物等'
							},
							{
								name:'美食测评',
								desc:'包括但不限于边吃边聊、评测推荐或吐槽各种美食等'
							},
							{
								name:'田园美食',
								desc:'包括但不限于乡野美食、三农采摘、钓鱼赶海等'
							},
							{
								name:'美食记录',
								desc:'记录一日三餐，美食vlog、料理、便当、饮品合集、美食小剧场等'
							}
						]
					},
					{
						name:'游戏',
						children:[
							{
								name:'单机游戏',
								desc:'以单机或其联机模式为主要内容的相关视频'
							},
							{
								name:'Mugen',
								desc:'使用Mugen引擎制作或与Mugen相关的游戏视频'
							},
							{
								name:'网络游戏',
								desc:'多人在线游戏为主要内容的相关视频'
							},
							{
								name:'GMV',
								desc:'使用游戏内容或CG为素材制作的MV类型的视频'
							},
							{
								name:'音游',
								desc:'通过配合音乐与节奏而进行的音乐类游戏视频'
							},
							{
								name:'电子竞技',
								desc:'电子竞技游戏项目为主要内容的相关视频'
							},
							{
								name:'手机游戏',
								desc:'手机及平板设备平台上的游戏相关视频'
							},
							{
								name:'桌游棋牌',
								desc:'桌游、棋牌、卡牌、聚会游戏等相关视频'
							}
						]
					},
					{
						name:'音乐',
						children:[
							{
								name:'原创音乐',
								desc:'由上传者本人参与创作制作或原作者授权代投的歌曲及纯音乐'
							},
							{
								name:'音乐现场',
								desc:'音乐实况表演视频'
							},
							{
								name:'VOVALOID·UTAU',
								desc:'以Vocaloid及UTAU引擎环境为主，运用各种音源进行创作'
							},
							{
								name:'翻唱',
								desc:'非官方性质的人声歌曲演绎'
							},
							{
								name:'演奏',
								desc:'使用各种传统及非传统乐器进行演奏创作'
							},
							{
								name:'音乐综合',
								desc:'收录无法定义到其他音乐子分区的音乐视频'
							},
							{
								name:'MV',
								desc:'音乐录影带，官方为搭配音乐而拍摄的短片'
							},
							{
								name:'电音',
								desc:'以电子合成器、音乐软件等产生的电子声响制作的音乐'
							}
						]
					},
					{
						name:'时尚',
						children:[
							{
								name:'美妆',
								desc:'涵盖妆容、发型、美甲等教程，彩妆、护肤相关产品测评、分享等'
							},
							{
								name:'服饰',
								desc:'服饰风格、穿搭技巧的教程与展示'
							},
							{
								name:'T台',
								desc:'发布会走秀现场及模特相关时尚片、采访、后台花絮'
							},
							{
								name:'健身',
								desc:'器械、有氧、拉伸运动等，以达到强身健体、减肥瘦身、形体塑造目的'
							},
							{
								name:'风尚标',
								desc:'时尚明星专访、街拍、时尚购物相关知识科普'
							}
						]
					},
					{
						name:'知识',
						children:[
							{
								name:'科学科普',
								desc:'以自然科学或基于科学思维展开的科普视频'
							},
							{
								name:'社科人文',
								desc:'社会/历史/法律/心理/文化/趣闻/艺术/人物/互联网'
							},
							{
								name:'财经',
								desc:'财经金融经济相关视频'
							},
							{
								name:'校园学习',
								desc:'学校里学习的相关内容，分享学习经验或是课程干货'
							},
							{
								name:'职业职场',
								desc:'职场经验、行业知识相关内容'
							},
							{
								name:'野生技术协会',
								desc:'技术型技能展示或是技能经验分享视频'
							}				
						]
					},
					{
						name:'娱乐',
						children:[
							{
								name:'综艺',
								desc:'国内外电视或网络自制的综艺正片及精彩剪辑视频'
							},
							{
								name:'明星',
								desc:'三次元明星相关的动态、资讯、粉丝向自制剪辑视频'
							}		
						]
					},
					{
						name:'影视',
						children:[
							{
								name:'短片',
								desc:'具有一定故事线的剧情短片或者追求印象诗意化的实验短片'
							},
							{
								name:'影视杂谈',
								desc:'影视评论、解说、吐槽、科普、配音等'
							},
							{
								name:'影视剪辑',
								desc:'对影视素材进行剪辑再创作的视频'
							},
							{
								name:'预告·资讯',
								desc:'影视类相关资讯，预告，花絮等视频'
							}
						]
					},
					{
						name:'动画',
						children:[
							{
								name:'MAD·AMV',
								desc:'具有一定创作度的动/静画二次创作视频'
							},
							{
								name:'MMD·3D',
								desc:'使用MMD和其他3D软件制作的视频'
							},
							{
								name:'综合',
								desc:'以动画及相关内容为素材的创作'
							},
							{
								name:'短片·手书·配音',
								desc:'颇具特色的短片/手书及ACG相关配音'
							},
							{
								name:'手办·模玩',
								desc:'手办模玩的测评、改造或其他衍生内容'
							},
							{
								name:'特摄',
								desc:'特摄相关衍生视频'
							},
						]
					},
					{
						name:'舞蹈',
						children:[
							{
								name:'宅舞',
								desc:'与ACG相关的翻跳、原创舞蹈'
							},
							{
								name:'舞蹈综合',
								desc:'收录无法定义到其他舞蹈子分区的舞蹈视频'
							},
							{
								name:'舞蹈教程',
								desc:'动作分解，基础教程等具有教学意义的舞蹈视频'
							},
							{
								name:'街舞',
								desc:'收录街舞相关内容,包括赛事现场、舞室作品、个人翻跳、FREESTYLE等'
							},
							{
								name:'明星舞蹈',
								desc:'国内外明星发布的官方舞蹈及其翻跳内容'
							},
							{
								name:'中国舞',
								desc:'传承中国艺术文化的舞蹈内容，包括古典舞、民族民间舞、汉唐舞、古风舞等'
							},
							
						]
					},
					{
						name:'数码',
						children:[
							{
								name:'手机平板',
								desc:'手机平板、app和产品教程等相关视频'
							},
							{
								name:'电脑装机',
								desc:'电脑笔记本、装机配件、外设和软件教程等相关视频'
							},
							{
								name:'摄影摄像',
								desc:'摄影摄像器材、拍摄剪辑技巧等相关视频'
							},
							{
								name:'影音智能',
								desc:'影音设备、智能硬件、生活家电等相关视频'
							},
							
						]
					},
					{
						name:'国创',
						children:[
							{
								name:'国产动画',
								desc:'国产连载动画，国产完结动画'
							},
							{
								name:'国产原创相关',
								desc:'以国产动画、漫画、小说为素材的二次创作'
							},
							{
								name:'布袋戏',
								desc:'布袋戏以及相关剪辑节目'
							},
							{
								name:'资讯',
								desc:'原创国产动画、漫画的相关资讯、宣传节目等'
							},
							{
								name:'动态漫·广播剧',
								desc:'国产动态漫画、有声漫画、广播剧'
							},
							
						]
					},
					{
						name:'鬼畜',
						children:[
							{
								name:'鬼畜调教',
								desc:'使用素材在音频、画面上做一定处理，达到与BGM具有一定同步感的视频'
							},
							{
								name:'音MAD',
								desc:'使用素材音频进行一定的二次创作来达到还原原曲的非商业性质稿件'
							},
							{
								name:'人力VOCALOID',
								desc:'将人物或者角色的无伴奏素材进行人工调音，使其就像VOCALOID一样歌唱的技术'
							},
							{
								name:'鬼畜剧场',
								desc:'使用素材进行人工剪辑编排的有剧情的视频'
							},
							{
								name:'教程演示',
								desc:'鬼畜相关的科普和教程演示'
							},
							
						]
					},
					
				]
			}
		},
		methods: {
			backToPrePage() {
				// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
				uni.navigateBack({
					// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
					delta:1
				})
			},
			choseImage() {
				// uniapp封装的选择图片函数
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						// 页面间数据交互
						// 存储已选择图片的临时路径(同步调用)
						uni.setStorageSync('tempFilePaths', res.tempFilePaths[0])
						
						uni.navigateTo({
							// 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数
							url: '../choseImage/choseImage',
							// url: '../crop/crop',
						})
					}
				})
			},
			// 点击分区表单项触发的函数
			showFenqu(){
				this.show = true
			},
			// 隐藏遮罩层
			hide() {
				this.show = false
			},
			// 选择分区时点击二级分类后触发的函数
			choseFenqu(index){
				// 隐藏遮罩和弹出层
				this.hide()
				// 将选中的二级分类索引赋给childIndex
				this.chosedIndex = [this.activeParentIndex,index]
				this.form.fenqu = this.fenquData[this.chosedIndex[0]].children[this.chosedIndex[1]].name
				
				// 获取被点击的分区距离父元素的高度，核心思路是遍历之前的元素，将这些元素的高度累加
				// 将距离顶部的高度初始化为0，否则这个高度会一直累加
				this.topParent = 0
				let that = this
				for (let i=0;i<this.chosedIndex[1];i++){
					uni.createSelectorQuery().select('.chose'+i).fields(
					{
				 　 		size: true, // 是否返回节点尺寸
			　　		},
					data => {
						that.topParent += data.height
					}).exec()
				}
				
				// 调整一级分类距离顶部的高度(110rpx需要转换为px)
				this.scrollTop = this.activeParentIndex * (SCREEN_WIDTH / 750 * 110)
			},
			// 提交表单时触发
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过')
					} else {
						console.log('验证失败')
					}
				})
			},
			 // 单选框的选中项发生变化时触发
			radioChange(evt) {
				this.form.type = evt.target.value
				// console.log(this.form.type)
			},
			// 点击单选框的遮罩层触发
			pre(){
				this.$refs.uToast.show({
					title: '请先选择分区',
					duration: 1500
				})
			},
			getSystemInfo(){
				return uni.getSystemInfoSync().platform !== 'android'
			}
			
		},
		// 页面展示时获取到裁剪图片的临时路径
		onShow() {
			this.cutImgPath=uni.getStorageSync('cutImgPath')
		},
		// 页面销毁后清空封面图片
		onUnload(){
			uni.setStorageSync('cutImgPath', '')
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="less">
	.hoverBorder {
		uni-radio .uni-radio-input {
			border: 2rpx solid rgba(0,0,0,0.5)!important;
		}
	}
</style>
